﻿@model List<Category>
@using LiteBlog
@{
    ViewBag.Title = "Manage Categories";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section ScriptSection
{
    <script type="text/javascript">
        $(function () {
            var categories = new Categories();
            categories.loadJson(@Html.Json(Model));
            ko.applyBindings(categories, document.getElementById("main"));

            $('ul#reorder').sortable();
        });
    </script>
}

<div id="main" class="hidden" data-bind="css: {hidden: false}">
    <h1>Categories</h1>
    <div id="lmain" style="float: left; width: 65%">
        <div>
            <input type="button" value="Create Category" data-bind="click: add, enable: addEnable" />
        </div>
        <div class="success" data-bind="text: successMessage">
        </div>
        <div class="error" data-bind="html: errorMessage">
        </div>
        <table class="grid">
            <thead>
                <tr>
                    <th style="width: 15%">Edit</th>
                    <th style="width: 15%">Delete</th>
                    <th style="width: 35%">Url Name</th>
                    <th style="width: 35%">Display Name</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: collection">
                <tr data-bind="visible: !isEdit(), css: { alternateRow: !isOdd() }">
                    <td style="text-align: center"><a href="#" data-bind="click: edit">Edit</a></td>
                    <td style="text-align: center"><a href="#" data-bind="click: remove">Delete</a></td>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: displayName"></td>
                </tr>
                <tr data-bind="visible: isEdit, css: { 'editRow': isEdit }">
                    <td></td>
                    <td></td>
                    <td>
                        <input type="text" name="name" data-bind="value: name, valueUpdate: 'afterkeydown', css: { 'errorBox': name.hasError }" /></td>
                    <td>
                        <input type="text" name="displayName" data-bind="value: displayName, valueUpdate: 'afterkeydown', css: { 'errorBox': displayName.hasError }" /></td>
                </tr>
                <tr data-bind="visible: isEdit, css: { editRow: isEdit }">
                    <td colspan="3"></td>
                    <td style="text-align: right">
                        <a href="#" data-bind="click: update">Update</a>
                        <a href="#" data-bind="click: close">Close</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="rmain" style="float: left; width: 30%">
        <fieldset>
            <legend>Reorder Categories
            </legend>

            <div>Drag and Drop list items to reorder</div>

            <ul id="reorder" data-bind="foreach: collection">
                <li data-bind="attr: {id: name}, text: displayName"></li>
            </ul>
            <div style="text-align: center">
                <input type="button" value="Reorder" data-bind="click: reorder" />
            </div>
        </fieldset>
    </div>
    <div class="clear"></div>
</div>

